<style scoped>

</style>
<template>
  <div>
    <wv-search-bar
      :autofocus="false"
      v-model="value"
      :result="filterResult"
      @search="onSearch"
      @cancel="onCancel"
      @click-result="onSelect"
    />
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data () {
    return {
      value: '',
      defaultResult: []
    }
  },
  computed: {
    filterResult () {
      return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
    }
  },

  methods: {
    onSearch (val) {
      this.$emit('doSearch',val)
    },
    onCancel () {
      this.$emit('doSearch', '')
    },
    onSelect (val) {
      this.value = val;
    }
  }
}
</script>
